<template>
  <v-chart :autoresize="true" :manual-update="true" class="chart" theme="shine"
           ref="chart"/>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from 'vue';
import {consumeTrend} from '@/api/dataScreen';
import {round} from "number-precision";
import dayjs from "dayjs";



export default defineComponent({
  setup(props, context) {
    const state = reactive(new class {
      list = [] as any;
      xData = [] as any;
      seriesData = [] as any;
    });

    const chart = ref();
    // const refs = chart.value as any as {
    //   chart: { mergeOptions: any, chart: any },
    // };

    const initOptions = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        },
        formatter(params) {
          let str = "";
          for (let x in params) {
            str += params[x].seriesName + ":" + params[x].value + '万元/';
          }
          return str.slice(0, str.length - 1);
        }
      },
      legend: {
        data: ['昨日消费金额', '今日消费金额'],
        x: 'left',
        top: '5%',
        left: '10%',
        itemWidth: 10,//图例的宽度
        itemHeight: 10,//图例的高度
        textStyle: {//图例文字的样式
          color: '#fff',
          fontSize: '0.65rem',
        }
      },
      grid: {
        // left: '3%',
        // right: '4%',
        bottom: '30%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: '0.65rem'
            },
            // rotate: 20,
          },
          // splitLine: {
          //     show: false
          // },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(211 ,211 ,211,0.5)'
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: '0.65rem'
            },
            formatter:"{value}万"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(211 ,211 ,211,0.0)'
            }
          }
        }
      ],
      series: [
        {
          name: '昨日消费金额',
          type: 'line',
          stack: '总量',
          smooth: true,
          areaStyle: {},
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  // !! 在此添加想要的渐变过程色 !!
                  {offset: 0, color: '#73b9a2'},
                  {offset: 0.5, color: '#72baa7'},
                  {offset: 1, color: '#00ae9d'}
                ]
              },
            }
          },
        }, {
          name: '今日消费金额',
          type: 'line',
          stack: '总量',
          smooth: true,
          areaStyle: {},
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  // !! 在此添加想要的渐变过程色 !!
                  {offset: 0, color: '#7bbfea'},
                  {offset: 0.5, color: '#33a3dc'},
                  {offset: 1, color: '#228fbd'}
                ]
              },
            }
          },
        },
      ]
    }

    async function getData(stationCode: number,searchDate:any) {
      state.list = await consumeTrend(stationCode,0, dayjs(searchDate[0]).format('YYYY-MM-DD'), dayjs(searchDate[1]).format('YYYY-MM-DD'));
      if (state.list && state.list[0]) {
        dealChartData();
      }
    }

    function dealChartData() {
      state.xData = [];
      state.seriesData = [[], []];
      for (let item of state.list) {
        state.xData.push(item.小时 + ':00');
        state.seriesData[0].push(item['小时实收金额(今日)']);
        state.seriesData[1].push(item['小时实收金额(昨日)']);
      }
      initOptions.xAxis[0]['data'] = state.xData;
      initOptions.series[0]['data'] = state.seriesData[0];
      initOptions.series[1]['data'] = state.seriesData[1];
      chart.value.setOption(initOptions);
    }


    return {
      getData,
      chart
    }
  }
});
</script>

<style scoped>

</style>
